<template>
  <div class="page-content">
    <el-card class="box-card" style="height:100%;" :body-style="{height:'100%'}">
      <div id="container" />
    </el-card>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
// import { getInfo } from '@/api/user' 接口引入
export default {
  name: 'RealTimeVideo',
  data() {
    return {
      map: null,
      marker: null
    }
  },
  computed: {

  },
  mounted() {
    this.initAMap()
  },
  beforeDestroy() {
    this.map?.destroy()
  },
  methods: {
    initAMap() {
      const markerContent = `<div class="custom-content-marker">
<img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png"></div>`
      window._AMapSecurityConfig = {
        securityJsCode: '0bdb360f0906d1e853f2014ffe0373f8'
      }
      AMapLoader.load({
        key: '1eafc713f3f5ad52e80ffeba6eeb75e0', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Scale'] // 需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      })
        .then((AMap) => {
          this.map = new AMap.Map('container', {
            // 设置地图容器id
            viewMode: '3D', // 是否为3D地图模式
            zoom: 11, // 初始化地图级别
            center: [112.938814, 28.228209] // 初始化地图中心点位置
          })
          const position = new AMap.LngLat(112.93516, 28.188344) // Marker 经纬度
          this.marker = new AMap.Marker({
            position: position,
            content: markerContent, // 将 html 传给 content
            offset: new AMap.Pixel(-13, -30) // 以 icon 的 [center bottom] 为原点
          })
          this.map.add(this.marker)
        })
        .catch((e) => {
          console.log(e)
        })
    }
  }
}
</script>
<style lang="scss">
#container{
    padding:0px;
    margin: 0px;
    width: 100%;
    height: 800px;
}
.custom-content-marker {
  position: relative;
  width: 25px;
  height: 34px;
}

.custom-content-marker img {
  width: 100%;
  height: 100%;
}

.custom-content-marker .close-btn {
  position: absolute;
  top: -6px;
  right: -8px;
  width: 15px;
  height: 15px;
  font-size: 12px;
  background: #ccc;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 15px;
  box-shadow: -1px 1px 1px rgba(10, 10, 10, .2);
}

.custom-content-marker .close-btn:hover{
  background: #666;
}
</style>
